<template>
  <div class='container'>
    <el-card>
      贺宇飞
      <!-- 关键字表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="formInline.val"></el-input>
        </el-form-item>
        <el-form-item class="filter-item fr">
          <el-button @click="clean">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格 -->
      <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
        <el-table-column property="id" label="编号" width="183">
        </el-table-column>
        <el-table-column property="questionType" width="120" label="题型">
          <template slot-scope="{row}">
            <span v-if="row.questionType==='1'">单选</span>
            <span v-else-if="row.questionType==='2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="188">
          <template slot-scope="scope">
            <el-button type="text" v-for="(item,index) in scope.row.questionIDs" :key="index"
              @click="testList(item.id)">{{item.number}}</el-button>
          </template>
        </el-table-column>
        <el-table-column property="addTime" label="录入时间" width="185">
        </el-table-column>
        <el-table-column property="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column property="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column property="userName" label="录入人">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteData(scope.row.id)" plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pagesize"
        layout="prev, pager, next,sizes, jumper" :total="counts">
      </el-pagination>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%">
      <el-row>
        <el-col :span="6">【题型】：<span v-if="testData.questionType==='1'">单选</span><span
            v-else-if="testData.questionType==='2'">多选</span><span v-else>简单</span></el-col>
        <el-col :span="6">【编号】：{{testData.id}}</el-col>
        <el-col :span="6">【难度】：<span v-if="testData.difficulty==='1'">简单</span><span
            v-else-if="testData.difficulty==='2'">一般</span><span v-else>困难</span></el-col>
        <el-col :span="6">【标签】：{{testData.tags}}</el-col>
        <el-col :span="6">【学科】：{{testData.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{testData.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{testData.direction}}</el-col>
      </el-row>
      <hr>
      <el-row>【题干】：</el-row>
      <p v-html="testData.question" style="color:#00f"></p>
      <el-row>多选题 选项：(选中的选项为正确答案)</el-row>
      <el-row>
        <el-col v-for="item in testData.options" :key="item.id">
          <el-checkbox v-model="item.isRight" :true-label='1' :false-label='0'>{{item.title}}</el-checkbox>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="3">【参考答案】：</el-col>
        <el-col :span="21">
          <el-button type="danger" @click="flag=!flag">视频答案预览</el-button>
        </el-col>
        <el-col>
          <video :src="testData.videoURL" width="400px" controls autoplay v-if="flag===true"></video>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="3">【答案解析】：</el-col>
        <el-col :span="21"><a :href="testData.remarks">{{testData.remarks}} 有答案</a>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="3">【题目备注】：</el-col>
        <el-col :span="21">{{testData.remarks}} 有答案
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      // 关键字表单对象
      formInline: {
        val: ''
      },
      // 组题列表数据
      tableData: [],
      // 组题列表查询数据对象
      queryInfo: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      counts: 0,
      dialogVisible: false, // 题目预览对话框的显示与隐藏
      testData: {}, // 题目预览试题数据
      flag: false// 视频答案预览显示与隐藏的变量
    }
  },
  methods: {
    // 点击题目编号获取试题预览数据
    async testList (id) {
      const res = await detail({ id: id })
      if (res.status !== 200) { return this.$message.info('获取数据失败') }
      this.testData = res.data
      console.log(this.testData)
      this.dialogVisible = true
    },
    // 获取组题列表数据
    async getList () {
      const { data: res } = await randoms(this.queryInfo)
      this.tableData = res.items
      this.queryInfo.page = res.page * 1
      this.queryInfo.pagesize = res.pagesize * 1
      this.counts = res.counts
    },
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getList()
    },
    // 点击清除按钮，清空关键字输入框
    clean () {
      this.formInline.val = ''
      this.queryInfo.keyword = this.formInline.val
      this.getList()
    },
    // 点击筛选按钮按照用户输入的关键字且回到第一页进行查询，更新列表
    search () {
      this.queryInfo.keyword = this.formInline.val
      this.getList()
    },
    // 点击删除按钮，弹出警告确认框
    async deleteData (id) {
      // 点击确认按钮，进行删除操作
      const res = await this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message.info('取消删除')
      }
      const qq = await removeRandoms({ id: id })
      if (qq.status !== 200) {
        return this.$message.info('删除数据失败')
      }
      this.getList()
      this.$message.success('删除数据成功')
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () {
    this.getList()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-alert {
  margin-bottom: 20px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-button--text {
  margin: unset;
}
.el-row,
.el-col {
  margin: 10px 0 10px 0;
}
</style>
